<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>报名设置</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/publish.css"/>
    <link rel="stylesheet" href="../css/publish_activity.css"/>
    <style>
        /*头部*/
        html{
            background-color: #fff;
        }
        .publish_header{
            padding-top: 0.4rem;
            line-height: 0.3rem ;
        }
        .publish_header .publish{
            line-height: 0.9rem ;
        }
        .publish_header i{
            top: 20%;
        }
        /*尾部*/
        .manage{
            background-color: #fff;

            width: 100%;
            padding:0 0.3rem;
            padding-top: 1.5rem;
        }
        .manage>p,.spend>p {
            height: 1rem;
            line-height: 1rem;
            font-size: 0.32rem;
            color:#5f321a;
        }
        .manage span{
            font-size: 0.3rem;
            padding:0.1rem 0.2rem;
            color:#5f321a;
            border:1px solid #5f321a;
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
        .manage .active{
            color:#fff;
            background-color: #5f321a;
        }
        .spend{
            background-color: #fff;
            border-top:  0.2rem solid #eee;
            padding:0 0.3rem;
            padding-top: 0.2rem;
            position: relative;
        }
        .spend span{
            position: absolute;
            right: 3%;
            top: 20%;
            padding-top: 0.2rem;
        }
        .spend span em{

            padding: 0.1rem 0.2rem ;

            border: 1px solid #5f321a;
            border-radius: 5px;
            margin: 0;
            background-color: #dfdede;
            color:#333333;
        }
        .spend span .active{
            color: #fff;
            background-color: #5f321a;
        }
        .price{
            width: 100%;
            padding:0.2rem 0.3rem;
            background-color: #fff;
            line-height: 1rem;
            height: 1rem;
        }
        .price span{
            font-size: 0.3rem;
        }
        .price i{
            color:red;
        }
        .price input{
            border:1px solid #eee;
            margin-left: 0.2rem ;
            height: 0.6rem;
            line-height: 0.6rem ;
            width: 60%;
        }
        .publish_header .published{
            width: 1.5rem;
            line-height: 0.9rem;
            text-align: right;
            top: 32%;
        }
    </style>
</head>
<body>
<div class="layer">
    <header class="publish_header clearfix">
        <i class="f_left" onclick="back()" ></i>
        <h3 class="publish">报名设置</h3>
        <em class="published">确定</em>
    </header>
  <div class="manage">
      <p>报名信息</p>
      <span data-value="1" class="active">姓名</span>
      <span data-value="2">电话</span>
      <span data-value="3">邮箱</span>
      <span data-value="4">身份证号码</span>
      <span data-value="5">QQ</span>
      <span data-value="6">微信</span>
      <span data-value="7">生日</span>
      <span data-value="8">性别</span>
      <span data-value="9">爱好</span>
      <span data-value="10">年龄</span>
      <span data-value="11">学历</span>
      <span data-value="12">公司</span>
      <span data-value="13">地址</span>
      <span data-value="14">职位</span>
      <span data-value="15">学校</span>
      <span data-value="16">年级</span>
  </div>
   <div class="spend">
       <p>费用设置</p>
   <span class="price_spend">
       <em  class="active" data-price="0">免费</em>
       <em data-price="1" >收费</em>
   </span>
   </div>
    <div class="price">
        <span>价格 <i>*</i></span>
        <input type="text" placeholder="请输入金额" id="input_price"/> 元
    </div>

</div>

</body>
<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/jquery.js"></script>
<script >
    $(function (){
        var flag=true;

        $(".manage span").click(function(){
            if(flag){
                $(this).addClass("active");
                flag=false;
            }else{
                $(this).removeClass("active");
                flag=true;
            }
        })
        var list=[];
        $(".published").click(function(){

            $(".manage .active").each(function(i){
                var sortid=$(this).data("value");
                list.push(sortid);
            });
            //console.log(list);//成功 数组形式
        })
    })
    //收费 免费
    var tag=true;
    $(".spend em").click(function(){
        if(tag){
            $(this).addClass("active");
          $(this).siblings().removeClass("active");
            tag=false;
        }else{
            $(this).removeClass("active");
            tag=true;
        }

    })
    $(".published").click(function(){
        //获取价格
        var price_spend=$(".price_spend>.active").data("price");
        //console.log(price_spend);
        var price=$("#input_price").val();
        //console.log(price);
        if(price_spend==1||price!==""){

            localStorage.setItem("price_spend",price);
        }
        console.log($("#input_price").val());
        back();
    })

</script>
</html>